<!-- 标签组件 -->
<template>
	<!-- :style="{height: height}" -->
	<view class="tabs flex flex-dir-c" :style="{height: height}">
		<view>
			<slot name="nav" />
			<!-- <view class="u-safe-area-inset-bottom" style="border: 1px solid red;"></view> -->
		</view>
		<view class="f1" :style="[$u.addStyle(itemStyle)]">
			<u-tabs lineColor="#FFBA2F" :scrollable="list.length>=6?true:false" :background="background"
				activeStyle="color:#FFBA2F" :keyName="keyName" inactiveStyle="color:#666666" :list="list"
				:current="isStoreSwiper ? storeSwiperCurrent : swiperCurrent" @change="change"></u-tabs>
			<swiper :style="{'height': `calc(100% - 44px)`}" class="swiper"
				:current="isStoreSwiper ? storeSwiperCurrent : swiperCurrent" @change="swiperChange">
				<swiper-item :style="swiperItemStyle" class="swiper-item" v-for="(item, index) in list.length"
					:key="index">
					<scroll-view :bounces="false" enhanced :show-scrollbar="false" :style="[$u.addStyle(scrollStyle)]" scroll-y class="scroll" @scrolltolower='scrolltolower'>
						<slot :name="index+'tabs'"></slot>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'Tabs',
		props: {
			swiperItemStyle: {
				type: [String, Object],
				default: ""
			},
			list: {
				type: Array,
				default: () => []
			},
			background: {
				type: String,
				default: '#fff'
			},
			keyName: {
				type: String,
				default: 'c_name'
			},
			itemStyle: {
				type: [String, Object],
				default: ""
			},
			isStoreSwiper: {	//是否启用vuex存储
				type: Boolean,
				default: false
			},
			scrollStyle: {
				type: [String, Object],
				default: ""
			}
		},
		data() {
			return {
				height: '100%',
				swiperCurrent: 0,
				bott: 0,
			}
		},
		computed: {
			...mapState({
				storeSwiperCurrent: state => state.swiperCurrent
			})
		},
		mounted() {
			let pages = getCurrentPages()
			let current = pages[pages.length - 1]
			let url = current.route
			// u-safe-area-inset-bottom
			let bottomSafe = 51
			// #ifdef MP-WEIXIN
			let system = wx.getSystemInfoSync()
			bottomSafe = (system.screenHeight - system.safeArea.bottom) + 51
			// #endif

			if (['pages/index/product', 'pages/index/orderForm', 'pages/index/equipment', 'pages/equipment/productManage']
				.indexOf(
					url) > -1) {
				this.height = `calc(100% - ${bottomSafe}px)`
			} else {
				this.height = '100%'
			}
			this.bott = bottomSafe
		},
		methods: {
			scrolltolower() {
				this.$emit('scrolltolower')
			},
			change({
				index
			}) {
				this.$store.commit('swiperCurrent', index)
				this.swiperCurrent = index
			},
			swiperChange({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current
				this.$store.commit('swiperCurrent', current)
				this.$emit('change', current)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		// height: 100%;
		// height: calc(100% -  constant(safe-area-inset-bottom));
		// height: calc(100% -  env(safe-area-inset-bottom));
	}
</style>